<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
		<script>
			function hideFn(){
				//隐藏id为showDiv的标签
				$("#showDiv").slideUp(2000);//2秒钟向上滑动
				
			}
			function showFn(){
				$("#showDiv").slideDown(3000);//3秒钟向下滑动
			}
			function toggleFn(){
				//显示和隐藏之间切换
				$("#showDiv").slideToggle(2000);
			}
		</script>
	</head>
	<body>
		<input type="button" value="点击div隐藏" onclick="hideFn()"/>
		<input type="button" value="点击div显示" onclick="showFn()"/>
		<input type="button" value="点击div隐藏和显示切换" onclick="toggleFn()"/>
		<div id="showDiv" style="width: 300px;height: 300px;background-color: red;">
			div显示和隐藏
		</div>
	</body>
</html>
